<template>
  <!-- 催收执行页-行动区模块-电催行动区 -->
  <section class="page telephone-action-area">
    <el-form :model="applyModel" :rules="rules" label-width="88px" ref="form">
      <el-row>
        <el-col :span="12">
          <el-form-item label="催收对象:" prop="relationship">
            <el-select v-model="applyModel.relationship">
              <el-option
                v-for="{ index, name, code } in $dict.getDictData(
                  'Relationship'
                )"
                :key="index"
                :label="name"
                :value="code"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="姓名:" prop="targetName">
            <el-input
              v-model.trim="applyModel.targetName"
              :maxlength="20"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="电话号码:" prop="targetPhone">
            <el-input
              v-model.trim="applyModel.targetPhone"
              :maxlength="11"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客观码:" prop="objectiveId">
            <el-select v-model="applyModel.objectiveId" @change="objectChange">
              <el-option
                v-for="{ index, name, id } in objectiveCode"
                :key="index"
                :label="name"
                :value="id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="修饰码:" prop="modifierId">
            <el-select v-model="applyModel.modifierId">
              <el-option
                v-for="{ index, name, id } in modifierCode"
                :key="index"
                :label="name"
                :value="id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="下次跟进时间:" prop="checkTime">
            <el-date-picker
              :value-format="'yyyy-MM-dd'"
              :picker-options="$common.datePickDisabledDate(1)"
              placeholder="请选择日期"
              type="date"
              v-model="applyModel.checkTime"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="催记描述:" prop="followContent">
          <el-input
            type="textarea"
            v-model="applyModel.followContent"
            :rows="5"
            style="width:97%"
            maxlength="500"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-row>
    </el-form>
    <div class="text-center">
      <el-button @click="reset">重置</el-button>
      <el-button @click="submit">提交</el-button>
    </div>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies } from "~/core/decorator";
import { CaseOperatorPageService } from "~/services/domain-service/case-operator-page.service";
import { Prop, Emit, Watch } from "vue-property-decorator";
import { CASE_CHANNEL, MENU_CHANNEL } from "~/config/enum.config";
import { namespace } from "vuex-class";
import { UserService } from "~/services/management-service/user.service";
const CollectionExecutionModule = namespace("collection-execution");
const callCenterStore = namespace("call-center");

@Component({
  components: {}
})
export default class TelephoneActionArea extends Vue {
  @Dependencies(CaseOperatorPageService)
  private caseOperatorPageService: CaseOperatorPageService;
  @Dependencies(UserService)
  private userService: UserService;
  @CollectionExecutionModule.State private caseId;
  @CollectionExecutionModule.State private menuChannel;
  @CollectionExecutionModule.State private otherData;
  @CollectionExecutionModule.State private phoneClickData;
  @CollectionExecutionModule.State private objectiveCode;
  @callCenterStore.State private callId;
  @callCenterStore.Mutation private updateCallId;

  private applyModel: any = {
    objectiveId: "",
    followContent: "",
    checkTime: "",
    caseId: "",
    modifierId: "",
    targetPhone: "",
    targetName: "",
    relationship: "",
    id:''
  };
  private modifierCode: any = [];
  private rules: any = {
    relationship: [{ required: true, message: "请选择催收对象" }],
    targetName: [{ required: true, message: "请输入姓名" }],
    targetPhone: [
      {
        required: true,
        validator: this.$validator.regex.phoneNumber,
        message: "请输入电话号码"
      }
    ],
    objectiveId: [{ required: true, message: "请选择客观码" }],
    followContent: [{ required: true, message: "请输入催记描述" }]
  };

  @Emit("success")
  private emitSuccess() {
    this.$message.success("操作成功");
    this.reset();
  }

  @Watch("phoneClickData")
  private phoneClickDataChange(newVal) {
    console.log('newVal',newVal);
    this.applyModel.relationship = newVal.relation;
    this.applyModel.targetName = newVal.contName;
    this.applyModel.targetPhone = newVal.phone;
    this.applyModel.id =newVal.id
  }

  private reset() {
    const form: any = this.$refs["form"];
    form.resetFields();
  }

  private submit() {
    const form: any = this.$refs["form"];
    form.validate(result => {
      if (!result) return;

      // 不考虑协催
      // if (this.menuChannel === MENU_CHANNEL.Assist_tel) {
      //   this.applyModel.assistId = this.otherData.assistId;
      // }

      this.applyModel.caseId = this.caseId;
      const params = { ...this.applyModel, callId: this.callId ,isEditable:'0'};

      this.caseOperatorPageService
        .addCaseFollowupRecord(CASE_CHANNEL.tel, params)
        .subscribe(data => {
          this.emitSuccess();
          this.updateCallId("");
        });
    });
  }

  private objectChange(val) {
    this.userService
      .findRelationModifierCodeById({ id: val })
      .subscribe(data => {
        this.modifierCode = data;
      });
    //客观码选择后清空修饰码历史值
    this.$nextTick(() => {
      this.applyModel.modifierId = "";
    });
    
  }
}
</script>

<style lang="less" scoped></style>
